<template>
  <div class="container">
    <div class="filter-bar">
      <el-form ref="queryFormRef" :inline="true" :model="queryForm" @submit.native.prevent>
        <el-form-item prop="keyword">
          <el-input v-model="queryForm.keyword" class="filter-item" clearable placeholder="名称/条码/自编码"
                    size="small"/>
        </el-form-item>
        <el-form-item>
          <el-checkbox-group v-model="checkCategoryList" size="small" @change="handleCheckboxChange">
            <el-checkbox-button v-for="item in categoryList" :key="item" :label="item">{{ item }}</el-checkbox-button>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
    </div>
    <div class="sum-bar">
      销售品类：{{ saleKinds }}
      <el-divider direction="vertical"></el-divider>
      销售总数：{{ saleQuantity }}
      <el-divider direction="vertical"></el-divider>
      销售金额：{{ salePayAmount.toFixed(2) }} 元
      <el-divider direction="vertical"></el-divider>
      退款金额：{{ saleRefundAmount.toFixed(2) }} 元
      <el-divider direction="vertical"></el-divider>
      赠送金额：{{ saleGiftAmount.toFixed(2) }} 元
    </div>
    <el-table :data="tableData" :height="contentHeight - 194" :row-class-name="tableRowClassName" style="width: 100%;">
      <el-table-column align="center" fixed label="序号" type="index"/>
      <el-table-column align="left" label="商品名称" prop="commodityName" show-overflow-tooltip
                       sortable></el-table-column>
      <el-table-column align="left" label="条码 | 自编码">
        <template slot-scope="scope">
          <div>{{ scope.row.barcode ? '条码: ' + scope.row.barcode : '' }}</div>
          <div>{{ scope.row.customCode ? '自编码: ' + scope.row.customCode : '' }}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="销售数量" prop="quantity" sortable></el-table-column>
      <el-table-column align="center" label="售价" prop="price" sortable></el-table-column>
      <el-table-column align="center" label="支付金额" prop="payAmount" sortable></el-table-column>
      <el-table-column align="center" label="支付方式" prop="payTypeName" sortable></el-table-column>
      <el-table-column align="center" label="支付状态" prop="payStatusName" sortable></el-table-column>
      <el-table-column align="center" label="支付时间" prop="payDate" sortable></el-table-column>
      <el-table-column align="center" label="种类" prop="category" sortable></el-table-column>
    </el-table>
    <div class="pager">
      <el-pagination :current-page="currentPage" :page-size="pageSize" :total="saleDetailListAfterFilter.length"
                     layout="total, prev, pager, next" @prev-click="handlePrevClick" @next-click="handleNextClick"
                     @current-change="handleCurrentChange"></el-pagination>
    </div>
  </div>
</template>

<script>
import {mapGetters} from 'vuex'
import {getSaleDetailList} from '@/api/store'

export default {
  name: 'StoreSale',
  data () {
    return {
      currentPage: 1,
      queryForm: {
        keyword: ''
      },
      checkCategoryList: [],
      saleDetailList: []
    }
  },
  computed: {
    ...mapGetters(['contentHeight', 'stationId', 'pageSize']),
    categoryList () {
      return Array.from(new Set(this.saleDetailList.map(item => item.category)))
    },
    saleDetailListAfterFilter () {
      return this.queryFilter(this.saleDetailList)
    },
    // 销售品类
    saleKinds () {
      var oldArr = this.queryFilter(this.saleDetailList.filter(item => item.payStatus === 1)).map(item => item.commodityId)
      return new Set(oldArr.reduce((prev, curr) => (prev.concat(curr)), [])).size
    },
    // 销售总数
    saleQuantity () {
      return this.queryFilter(this.saleDetailList.filter(item => item.payStatus === 1)).reduce((pre, item) => parseInt(item.quantity) + pre, 0)
    },
    // 销售金额
    salePayAmount () {
      return this.queryFilter(this.saleDetailList.filter(item => item.payStatus === 1)).reduce((pre, item) => parseFloat(item.payAmount) + pre, 0.00)
    },
    // 退款金额
    saleRefundAmount () {
      return this.queryFilter(this.saleDetailList.filter(item => item.payStatus === 0)).reduce((pre, item) => parseFloat(item.payAmount) + pre, 0.00)
    },
    // 赠送金额
    saleGiftAmount () {
      return this.queryFilter(this.saleDetailList.filter(item => item.payStatus === 1 && parseFloat(item.payAmount) === 0.00)).reduce((pre, item) => parseFloat(item.amount) + pre, 0.00)
    },
    tableData () {
      if (this.currentPage * this.pageSize > this.saleDetailListAfterFilter.length) {
        return this.saleDetailListAfterFilter.slice(this.pageSize * (this.currentPage - 1), this.saleDetailListAfterFilter.length)
      } else {
        return this.saleDetailListAfterFilter.slice(this.pageSize * (this.currentPage - 1), this.pageSize * this.currentPage)
      }
    }
  },
  mounted () {
    // 手动获取一次库存列表
    getSaleDetailList(this.stationId).then(res => {
      console.log(res)
      this.saleDetailList = res.data
    }).catch(err => {
      console.log(err)
    })
  },
  methods: {
    keywordFilter (dataList) {
      if (this.queryForm.keyword) {
        return dataList.filter(item => item.commodityName.indexOf(this.queryForm.keyword) > -1 || item.barcode.indexOf(this.queryForm.keyword) > -1 || item.customCode.indexOf(this.queryForm.keyword) > -1)
      } else {
        return dataList
      }
    },
    queryFilter (dataList) {
      if (this.checkCategoryList.length > 0) {
        return this.keywordFilter(dataList.filter(item => this.checkCategoryList.indexOf(item.category) > -1))
      } else {
        return this.keywordFilter(dataList)
      }
    },
    tableRowClassName ({row, rowIndex}) {
      if (row.payStatus === 0) {
        return 'warning-row'
      }
      return ''
    },
    handlePrevClick (page) {
      this.currentPage = page
    },
    handleNextClick (page) {
      this.currentPage = page
    },
    handleCurrentChange (page) {
      this.currentPage = page
    },
    handleCheckboxChange (value) {
      this.currentPage = 1
    }
  }
}
</script>
<style>
.el-table .warning-row {
  background: orange;
}
</style>
<style scoped>
.container {

}

.filter-bar {
  width: 100%;
  min-height: 60px;
}

.sum-bar {
  width: 100%;
  height: 60px;
  text-align: center;
  background: white;
  line-height: 60px;
  font-size: 1.5rem;
  color: grey;
  border-bottom: 1px solid #EBEEF5
}

.pager {
  width: 100%;
  text-align: center;
  /* padding: 5px; */
  background: white;
}
</style>
